<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="/2031echarts/js/vue.js"></script>
</head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            margin: 0 auto;

        }
        .boxOne{
            width: 100%;
            height: 40px; 
            border: 1px solid #000;
            box-sizing: border-box;
            position: relative;
        }
        .boxOne span{
            position: absolute;
            top: 20%;
            left: 0;
        }
        #goods{
            border-collapse: collapse;
            border: 1px solid #000;
            text-align: center;
            width: 100%;
            margin-top: 10px;
        }
        #goods tr>th{
            background-color: aqua;
            font-size: 16px;
            
        }
        th,td{
            border-collapse: collapse;
            border: 1px solid slateblue;
        }
    </style>
    <body>
        <div id="app">
            <div id="container">
                <div id="addTag">
                    <span>
                        <label>品牌名称</label>
                        <input type="test" v-model="goodname">
                        <button @click="addGoods">添加</button>
                    </span>
                </div>
                <div id="searchTag" class="boxOne">
                    <span>
                        <label>品牌名称</label>
                        <input type="test" v-model="searchgood">
                        <button @click="serachGoods">搜索</button>
                        </span>
            </div>
            <table id="goods">
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>品牌名称</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(value,index) in goodList":key="index">
                        <td>{{index +1 }}</td>
                        <td>{{value.name}}</td>
                        <td>{{value.yuan}}</td>
                        <td>
                            <button>-</button>
                            {{value.num}}</td>
                        <td>{{value.createtime}}</td>
                        <td><a href="#" @click="delete1($event)">删除</a></td>
                    </tr>
                    <tr v-if='goodList.length===0'>
                        <td colspan="6">没有商品</td>
                    </tr>
                </tbody>
            </table>
            <div>总计：{{totalPrice}}元</div>
            </div>

        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    goodList:[
                        {name:"水果",yuan:10,num:10,createtime:"2022/12/9"},
                        {name:"蔬菜",yuan:10,num:10,createtime:"2022/12/9"},
                        {name:"瓜子",yuan:10,num:10,createtime:"2022/12/9"}

                    ],
                    goodname:'',
                    searchgood:'',
                },
                methods:{
                    addGoods(){
                        var goodObj = new Object();
                        goodObj.name = this.goodname;
                        var current_time = new Date().toLocaleString();
                        goodObj.createtime=current_time;
                        goodObj.num=10;
                        goodObj.yuan=50;
                        this.goodList.push(goodObj);
                    },
                    searchGoods(){
                        var tarGoodName = this.searchgood;
                        var tempGoodList = new Array();
                        for(good of this.goodList){
                            if(good.name == tarGoodName){
                                tempGoodList.push(good)

                            }
                        }
                        this.goodList = tempGoodList;
                    },
                    delete1($event){
                        if(confirm("是否删除?")){

                        }
                        this.goodList.splice(event.data,1);
                        //0.1.2.3.4.5
                        //splice(2)
                        //删除0.1
                        //splice(x,y)
                        //splice(index,howmany)
                        //splice(2,1)
                        //删除2
                        //splice(x,y,z)
                        //不仅可以删除，还可以添加
                    },
                handleReduce(index){
                    if( this.goodList[index].num === 1) return;
                    this.goodList[index].num --;
                },
                handleAdd(index){
                    this.goodList[index].num ++;
                    
                }

                    
                },
                computed:{
                    totalPrice(){
                        var total = 0;
                    for (var i = 0;i<this.goodList.length;i++){
                        var item = this.goodList[i];
                        total += item.yuan*item.num;

                    }
                    return total;
                    }
                }
            })
        </script>
    </body>
</html>